<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        body {
            /*background-image: url();*/
            background-repeat: no-repeat;
            background-size: 100% auto;
        }

        #sex {
            padding-left: 50px;
        }
    </style>
</head>
<body>
<h1 style="margin-left: 150px;margin-bottom: 30px">添加物质明细表</h1>
<div id="addMatterPrice-div">
    <form id="addMatterPrice-form" class="form-group">
        <div class="input-group mb-3" style="width: 450px">
            <label for="itemsName" style="width: 140px;text-align: center;">货物名称:</label>
            <input type="text" name="itemsName" class="form-control" id="itemsName">
        </div>
        <div class="input-group mb-3" style="width: 450px">
            <label style="width: 140px;text-align: center;">货物类型:</label>
            <select class="form-control" name="itemsTypeId" >
                <option value="">请选择</option>
                <option v-for="i in list" :value="i.itemsTypeId">{{ i.itemsTypeName }}</option>
            </select>
        </div>
        <div class="input-group mb-3" style="width: 450px">
            <label for="itemsAddress" style="width: 140px;text-align: center;">货物产地:</label>
            <input type="text" name="itemsAddress" step="0.01" class="form-control" id="itemsAddress">
        </div>
        <div class="input-group mb-3" style="width: 450px">
            <label for="itemsScale" style="width: 140px;text-align: center;">货物规格:</label>
            <input type="number" maxlength="1" name="itemsScale" step="0.01" class="form-control" id="itemsScale">
        </div>
        <div class="input-group mb-3" style="width: 450px">
            <label for="itemsCounts" style="width: 140px;text-align: center;">货物可供数量:</label>
            <input type="number" name="itemsCounts" step="0.01" class="form-control" id="itemsCounts">
        </div>
        <div class="input-group mb-3" style="width: 450px;margin-top: 30px">
            <button type="button" id="submit-btn" class="btn btn-primary"
                    style="margin-left: 150px; margin-right: 100px" @click="addMatterPrice()">添加
            </button>
            <button type="button" class="btn btn-danger" @click="returnMatterlist()">返回</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="../bootstrap/vue.js"></script>
<script>
    let map=ajax();;
    let app = new Vue({
        

        el: "#addMatterPrice-div",
        data:{
            list:map.list
        },
        methods: {
            addMatterPrice: function () {
                $.ajax({
                    type: "post",
                    url: "../Matter/addMatterInfo",
                    data: $("#addMatterPrice-form").serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.message == "添加成功") {
                            location.href = "matterInfo_list.html";
                        }
                    }
                })
            },
            returnMatterlist: function () {
                location.href = "matterInfo_list.html";
            }
        }
    })
    function ajax(){
        let list=[]
        $.ajax({
            type: "post",
            url: "../Matter/selItemsType",
            dataType: "json",
            async: false,
            success: function (json) {
                list=json;
            }
        })
        return list;
    }

</script>
</body>
</html>